<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<!-- 
	 {{     -> textContent 或 innerText
	 v-html -> innerHTML
	 
	 v-bind:attr=""
	 v-on:event=""
	 
	 条件渲染：v-if="条件"
	 列表渲染：v-for="(item, index) of 数组"
	 -->
	
	<div id="app">
		<header>
			<!-- <h1>{{ heading }}</h1> -->
			<!-- <h1 v-text="heading"></h1> -->
			<h1 v-if="isShowHeading" v-bind:title="title" v-html="heading"></h1>
		</header>
		<main>
			<!-- <button v-on:click="isShowHeading = !isShowHeading">toggle heading</button> -->
			<button v-on:click="toggleHeading">toggle heading</button>
			<hr>
			<!-- for(item of arr) in / of -->
			<div>
				<input type="text" id="content" v-on:input="handleInput" v-bind:value="itemText">
				<button v-on:click="handleClick">创建</button>
			</div>
			<ul>
				<li v-for="(item, index) of list">{{ index + 1 }}. {{ item.text }}</li>
			</ul>
			<div>总计：{{ list.length }} 个</div>
		</main>
		<footer></footer>
	</div>
	
	<script src="vue.js"></script>
	<script>
		const app = new Vue({
			el: "#app", // 将当前的实例和标签容器做关联
			data: { // 数据状态
				heading: "Hello <span style='color: red'>Vue</span>",
				title: "我是提示的title！",
				isShowHeading: true,
				itemText: "",
				list: [
					{ id: 1, text: "HTML" },
					{ id: 21, text: "CSS" },
					{ id: 13, text: "JavaScript" },
					{ id: 40, text: "Vue" },
				]
			},
			methods: { // 定义vue实例中使用的函数或方法
				toggleHeading: function() {
					this.isShowHeading = !this.isShowHeading
					console.log(this.isShowHeading)
				},
				handleClick() {
					if(!this.itemText) {// 判断为空
						return false
					}
					this.list.push({ // 往list添加数据
						id: Date.now(), 
						text: this.itemText 
					})
					this.itemText = "" // 清空输入的值
					
					// bad
					// 属于DOM操作，不符合vue的开发规范，
					// 避免使用DOM操作，尽量使用数据控制
					// console.log(document.getElementById("content").value)
				},
				handleInput(event) { // 在input里边输入，边修改值
					this.itemText = event.target.value
					// console.log(this.itemText)
				}
			}
		})
		
		// console.log(app.isShowHeading)
	</script>
</body>
</html>